<template>
	<view>
		<navBar>
			<template slot="title">
				<view>易征集</view>
			</template>
		</navBar>
		<view class="container">
			<image src="../../static/image/u30.png" mode=""></image>
			<view class="info">
				<view class="title">
					"易"征集
				</view>
				<view class="explain">
					<view class="text">
						<text>1. 作品应当主题明确，积极向上，具有一定的艺术性和观赏性。</text>
						<br />
						<text>2. 作品围绕变废为宝构思，使用无害废旧物品。</text>
						<br />
						<text>3. 投稿方式：请按界面要求逐一填写作品信息，并上传格式为jpg的作品图片和格式为mp4的作品制作讲解视频。</text>


					</view>
					<view class="declare">
						提交作品最终版权归易班所有
					</view>
					<view class="img" @click="toRegister()">
						<image src="../../static/image/u34.png" mode="aspectFit"></image>
					</view>
					<view class="imgInset">

						<image src="../../static/image/u31.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import navBar from "@/components/navBar.vue"
	export default {
		components: {
			navBar
		},
		data() {
			return {

			};

		},
		methods: {
			toRegister() {
				console.log(1);
				uni.navigateTo({
					url: '/pages/gatherRegister/gatherRegister'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		box-sizing: border-box;
		width: 100vw;
		min-height: 100vh;
		// height: 100%;
		background: #DFFBB3;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;

		.info {
			position: relative;
			width: 90%;
			height: 70%;
			background: #F0FAED;
			padding: 30rpx;
			border-radius: 20rpx;

			.title {
				height: 120rpx;
				width: 100%;
				background: #fff;
				color: #4B7902;
				font-size: 72rpx;
				font-weight: bold;
				text-align: center;
				line-height: 120rpx;
			}

			.explain {
				padding-top: 30rpx;
				color: #666;
				font-size: 36rpx;
				line-height: 1.8;
				display: flex;
				flex-direction: column;
				align-items: center;

				.explaintitle {
					margin: 20rpx;
					text-align: center;
					font-size: 40rpx;
				}

				.declare {
					font-size: 32rpx;
					text-align: center;
					margin-top: 20rpx;
				}

				.img {
					margin-top: 40rpx;
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.imgInset {
					width: 300rpx;
					height: 300rpx;
					position: absolute;
					bottom: 0;
					right: -10%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>